<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>机床列表</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <style>
    .running * {  /** 正常运行，绿色 */
        background-color: #449D44;
        color: white;
    }
    .warning * {  /** 出现故障，红色 */
        background-color: red;
        color: white;
    }
    .await * {  /** 待机状态，黄色 */
        background-color: #EC971F;
        color: white;
    }
    .stop * {  /** 停机状态，黑色 */
        background-color: black;
        color: white;
    }
    </style>
</head>

<body>
    <div class="content">
        <div class="content-block-title">一号车间</div>
        <div class="list-block">
            <ul>
                <li>
                    <div class="row">
                        <div class="col-33">
                            <div class="card running">
                                <div class="card-header">机床1-1</div>
                                <div class="card-content">
                                    <div class="card-content-inner">机床信息</div>
                                </div>
                                <div class="card-footer">运行正常</div>
                            </div>
                        </div>
                        <div class="col-33">
                            <div class="card running">
                                <div class="card-header">机床1-2</div>
                                <div class="card-content">
                                    <div class="card-content-inner">机床信息</div>
                                </div>
                                <div class="card-footer">运行正常</div>
                            </div>
                        </div>
                        <div class="col-33">
                            <div class="card warning">
                                <div class="card-header">机床1-3</div>
                                <div class="card-content">
                                    <div class="card-content-inner">机床信息</div>
                                </div>
                                <div class="card-footer">出现故障</div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="row">
                        <div class="col-33">
                            <div class="card running">
                                <div class="card-header">机床1-4</div>
                                <div class="card-content">
                                    <div class="card-content-inner">机床信息</div>
                                </div>
                                <div class="card-footer">运行正常</div>
                            </div>
                        </div>
                        <div class="col-33">
                            <div class="card running">
                                <div class="card-header">机床1-5</div>
                                <div class="card-content">
                                    <div class="card-content-inner">机床信息</div>
                                </div>
                                <div class="card-footer">运行正常</div>
                            </div>
                        </div>
                        <div class="col-33">
                            <div class="card running">
                                <div class="card-header">机床1-6</div>
                                <div class="card-content">
                                    <div class="card-content-inner">机床信息</div>
                                </div>
                                <div class="card-footer">运行正常</div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="content-block-title">二号车间</div>
        <div class="list-block">
            <ul>
                <li>
                    <div class="row">
                        <div class="col-33">
                            <div class="card running">
                                <div class="card-header">机床2-1</div>
                                <div class="card-content">
                                    <div class="card-content-inner">机床信息</div>
                                </div>
                                <div class="card-footer">运行正常</div>
                            </div>
                        </div>
                        <div class="col-33">
                            <div class="card await">
                                <div class="card-header">机床2-2</div>
                                <div class="card-content">
                                    <div class="card-content-inner">机床信息</div>
                                </div>
                                <div class="card-footer">待机中</div>
                            </div>
                        </div>
                        <div class="col-33">
                            <div class="card running">
                                <div class="card-header">机床2-3</div>
                                <div class="card-content">
                                    <div class="card-content-inner">机床信息</div>
                                </div>
                                <div class="card-footer">运行正常</div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="row">
                        <div class="col-33">
                            <div class="card stop">
                                <div class="card-header">机床2-4</div>
                                <div class="card-content">
                                    <div class="card-content-inner">机床信息</div>
                                </div>
                                <div class="card-footer">已停机</div>
                            </div>
                        </div>
                        <div class="col-33">
                            <div class="card running">
                                <div class="card-header">机床2-5</div>
                                <div class="card-content">
                                    <div class="card-content-inner">机床信息</div>
                                </div>
                                <div class="card-footer">运行正常</div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
    <script type="text/javascript" src="js/common.js?version=2016053101"></script>
    <script type="text/javascript">
    //菜单按下时改变背景透明度
    $('.card').bind('touchstart', function() {
        $(this).css('opacity', '0.6');
    });

    //菜单不被按下时取消透明度
    $('.card').bind('touchend', function() {
        $(this).css('opacity', '');
    });

    //点击卡片跳转到机床详情
    $('.card').click(function() {
        window.location = projectBaseUrl + 'machine/machine_detail.html';
    });

    </script>
</body>

</html>
<!--

机床状态分为1）正常运行2）待机3）故障（报警，手机工厂宝会有报警提醒，并有记录）4）停机

1）正常运行绿色2）待机 黄色3）故障（报警，手机工厂宝会有报警提醒，并有记录）红色4）停机黑色
